<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<style type="text/css">
		body{
			padding: 0;
			margin: 0;
			background-image: url("back.jpg");
		}
		.background{
			background-color: white;
			width: 70%;
			height: 500px;
			position: relative;
			left: 15%;
			top: 60px;
		}
		.navBar{
			background-color: #3c90b7;
			width: 70%;
			height: 80px;
			position: relative;
			top:50px;
			left: 15%;
			z-index: 9999;
			box-shadow: 0px 0px 10px #304050;
		}
		.navBar div{
			float: left;
		}
		.logodiv {
			position: relative;
			left: 50%;
			margin-left: -135px;
			margin-top: 23px;
		}
		.logodiv img{
			height: 40px;
		}
		.unlogindiv{
			margin-left: 75%;
			margin-top:40px;
		}
		.unlogindiv a{
			text-decoration: none;
			font-size: 14px;
			color: #f3f4f5;
			margin-left: 10px;
			margin-top: 43px;
			font-family: "微软雅黑";
		}
		.navBar.scroll{
			position: fixed;
			width: 100%;
			height: 40px;
			padding: 0;
			margin: 0;
			left: 0;
			top: 0;
		}
		.navBar.scroll .logodiv{
			padding: 0;
			margin-left: -69px;
			margin-top: 10px;
		}
		.navBar.scroll .logodiv img{
			height: 20px;

		}
		.navBar.scroll .unlogindiv,.unlogindiv div,a{
			margin-top: 5px;
			padding: 0;
		}


		/*博文列表部分样式*/
		.list_div{
			height: 500px;
			width: 100%;
			box-shadow: 0px 0px 10px #304050;
			margin-top: 30px;
		}

		/*色块部分样式*/
		.color_half{
			width: 30%;
			height: 500px;
			background-color: #3d99b7;
			float: left;
		}
		.rectangle{
			height: 300px;
			width: 170px;
			background-color: white;
			position: relative;
			top: 100px;
		}
		.circle{
			height: 300px;
			width: 300px;
			border-radius: 150px;
			background-color: white;
			position: relative;
			top: -200px;
			left: 16px;
		}
		.date{
			height: 300px;
			width: 100%;
			position: relative;
			top: -500px;
		}
		.year{
			position: relative;
			top: 15%;
			font-family: "华文仿宋";
			font-size: 150px;
		}
		.month{
			margin-left: 150px;
			font-family: "华文仿宋";
			font-size: 50px;
			float: left;
		}
		.day{
			margin-left: 220px;
			font-family: "华文仿宋";
			font-size: 50px;
		}

		/*图片部分样式*/
		.pic_half{
			width: 70%;
			height: 500px;
			background-color: #4a3db7;
			margin-left: 30%;
		}
		.title{
			font-family: "华文仿宋";
			font-size: 100px;
			position: relative;
			top: 35%;
			margin-left: 30px;
		}
		.author{
			font-family: "华文仿宋";
			font-size: 35px;
			position: relative;
			top: 70%;
			margin-top: -50px;
			margin-left: 80%;
		}

		.add{
			border-radius: 50px;
			height: 75px;
			width: 75px;
			background-color: #6358bf;
			position: fixed;
			top:85%;
			left: 90%;
			box-shadow: 0 0 10px #304050;
			text-align: center;
			font-size: 50px;
			line-height: 1.5em;
			color:#d3d4d5;
		}

	</style>
</head>
<body>
	<div class="navBar">
		<div class="logodiv"><img src="KNOWE.png"  ></div>
		<div class="logindiv">
			<div class="userBar"></div>
		</div>
		<div class="unlogindiv">
			<div class="loginButton"><a href="login.html">登陆</a></div>
			<div class="signInButton"><a href="signIn.html">注册</a></div>
		</div>
	</div>


<div class="background">
	<!--块部件 -->
	<div class="list_div">
		<div class="color_half">
			<div class="rectangle"></div>
			<div class="circle"></div>
			<div class="date">
				<div class="year">2016</div>
				<div class="month">08</div>
				<div class="day">01</div>
			</div>
		</div>
		<div class="pic_half">
			<div class="title">title title title title</div>
			<div class="author">blacknail</div>
		</div>
	</div>

	<div class="list_div">
		<div class="color_half">
			<div class="rectangle"></div>
			<div class="circle"></div>
			<div class="date">
				<div class="year">2016</div>
				<div class="month">08</div>
				<div class="day">01</div>
			</div>
		</div>
		<div class="pic_half">
			<div class="title">title title title title</div>
			<div class="author">blacknail</div>
		</div>
	</div>
	
	<div class="list_div">
		<div class="color_half">
			<div class="rectangle"></div>
			<div class="circle"></div>
			<div class="date">
				<div class="year">2016</div>
				<div class="month">08</div>
				<div class="day">01</div>
			</div>
		</div>
		<div class="pic_half">
			<div class="title">title title title title</div>
			<div class="author">blacknail</div>
		</div>
	</div>
</div>

<div class="add" >+</div>

<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
	
function checkScrollPosition() {
    if($(window).scrollTop() > 50) {
      $(".navBar").addClass("scroll");
  } else {        
      $(".navBar").removeClass("scroll");
  }
}

$(document).ready(
    function () {   

    checkScrollPosition();

});

$(window).on("scroll", function() {
    checkScrollPosition();    
});

</script>
</body>
</html>